$imgPath: '../../img/topic';
$fontPath: '../font';

@font-face {
    font-family:icomoon;
    src:url(#{$fontPath}/topic.ttf?b59v24);
    font-weight:400;
    font-style:normal
}
@import 'icon';

@import '../reset';

@import 'commonTopic';

@import 'speakBottom';


.flex-body{
    position: absolute;
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    overflow: hidden;
}
.flex-main {
    position: relative;
    height: 100%;
    width: 100%;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    overflow: hidden;
}
.hasTabBottom {
    @at-root .pageMenu li.li-tab-control {
        display: none;
    }
    .pageMenu li.li-tab-control{
      display: block;
    }
}

// 主屏中的操作、滚动到第一页和最后一页的按钮条  --begin--
.pageMenu {
  position: absolute;
  z-index: 4;
  margin: 0 0 1rem;
  top: .5rem;
  right: .5rem;
  color: #fff;

  li {
    position: relative;
    display: block;
    width: 3.6rem;
    height: 3.6rem;
    text-align: center;
    line-height: 3.6rem;
    font-size: 1.2rem;
    cursor: pointer;
    margin-bottom: 1px;
    background: rgba(31,31,31,.5);
  }
  li.btn_frist_msg {
      padding: 0;
      opacity: 1;
      color: #fff;
  }
  li.mine-exit {
      background-image: url(#{$imgPath}/mine-exit.png);
      background-position: center center;
      background-repeat: no-repeat;
      background-size: 35% auto;
  }
}
// 主屏中的操作、滚动到第一页和最后一页的按钮条  --end--

// 主屏中的聊天室操作条  --begin--
.barrage_control.on .black_bar .allcount {
    max-width: 30rem;
    cursor: pointer;
}

.barrage_control {
    position: absolute;
    bottom: 1rem;
    right: .5rem;
    z-index: 3;

    .black_bar {
      position: relative;
      display: inline-block;
      height: 3rem;
      border-radius: 4rem;
      z-index: 2;
      background-color: rgba(31,31,31,.5);

      li {
          display: inline-block;
          height: 3rem;
          line-height: 3rem;
          vertical-align: top;
      }
      .main {
          white-space: nowrap;
          text-align: center;
      }
      .btn_tab_1 {
          margin-right: 0;
          font-size: 1rem;
      }
      .barrage_tab {
          position: relative;
          width: 3rem;
          height: 3rem;
          border-radius: 3rem;
          background: rgba(31,31,31,.5);
          border-radius: 3rem;
          cursor: pointer;
          color: #fff;

          &::after {
              content: "";
              position: absolute;
              width: 4rem;
              height: 4rem;
              left: 50%;
              top: 50%;
              -webkit-transform: translate(-50%,-50%);
              transform: translate(-50%,-50%);
          }
      }
      .allcount {
          display: inline-block;
          color: #fff;
          height: 3rem;
          line-height: 3rem;
          max-width: 0;
          overflow: hidden;
          line-height: 3rem;
          color:#fff;
          margin: 0 0.3rem;

          &::before {
              font-size: 1.4rem;
              padding-right: .2rem;
              margin-right: .5rem;
          }
          var {
            vertical-align: top;
            display: inline-block;
            padding-right: .2rem;
            height: 100%;
          }
      }
  }
  .tabToComment {
    display: inline-block;
    height: 3rem;
    padding: 0 1rem;
    color: #fff;
    background: rgba(31,31,31,.5);
    border: none;
    text-align: center;
    line-height: 3rem;
    font-size: 1.2rem;
    border-radius: 3rem;
    cursor: pointer;
  }
}
// 主屏中的聊天室操作条  --begin--

// 主屏中的三条讨论 --begin--
.danmuBox {
    position: absolute;
    right: 0;
    bottom: 5rem;
    border-radius: 3px;
    z-index: 3;
    display: none;
    padding-left: .3rem;
    -webkit-overflow-scrolling: touch;
}
.lucky-money-bullet {
    display: block;
    margin-right: .5rem;

    .lmb-item {
        position: relative;
        display: none;
        left: 120%;
        padding: .5rem;
        white-space: nowrap;
        background: rgba(0,0,0,.5);
        border-radius: 5px;
        -webkit-transition: .1s;
        transition: .1s;
    }
    .money {
        display: inline-block;
        height: 3rem;
        line-height: 3rem;
        font-size: 2.2rem;
        color: #ffd780;
        vertical-align: top;
    }
    .msg {
        display: inline-block;
        vertical-align: top;

        b {
            font-weight: 400;
            font-size: 1.2rem;
            height: 1.5rem;
            line-height: 1.5rem;
        }
        .b-one {
            display: block;
            color: #fff;
        }
        .b-two {
            display: inline-block;
            color: rgba(255,255,255,.6);
        }
    }
    .head {
        display: inline-block;
        height: 2.6rem;
        width: 2.6rem;
        border-radius: 6rem;
        overflow: hidden;
        margin-top: .2rem;
    }
}
.danmulist {
    float: right;

    dd {
        display: block;
        overflow: hidden;
        padding: 0 0 0 1rem;
        margin: .5rem 0;
        cursor: pointer;

        p {
          display: block;
          display: -webkit-box;
          -webkit-line-clamp: 5;
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;
          max-width: 13rem;
          min-width: 3rem;
          max-height: 10.8rem;
          line-height: 2rem;
          overflow-h: hidden;
          color: #fff;
          background-color: rgba(0,0,0,.5);
          padding: .4rem .6rem;
          border-radius: .3rem;
          float: right;
          position: relative;
          word-break: break-all;
      }
    }
    i {
        float: right;
        width: 2rem;
        height: 2rem;
        margin: .3rem .5rem 0 .5rem;
        vertical-align: top;

        img {
            width: 100%;
            height: 100%;
            border-radius: 2.5rem;
        }
    }
}
.ask_label {
    border: 1px solid #00a2ff;
    padding: 0 .2rem;
    margin-right: .3rem;
    border-radius: .2rem;
    font-size: 1rem;
    vertical-align: top;
    font-weight: 400;
    background: #ecf8ff;
    color: #00a2ff;
}
// 主屏中的三条讨论 --end--

// 左上角直播间条
.live-back-wrap {
    padding: .6rem;
    background-color: rgba(0, 0, 0, 0);
    position: absolute;
    z-index: 3;
}
.live-back {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    height: 3.2rem;
    background-color: rgba(31,31,31,.5);
    border-radius: 3.2rem;
    padding: .3rem .3rem .3rem 0;
    box-sizing: border-box;

    img {
        width: 3.2rem;
        height: 3.2rem;
        border-radius: 50%;
        vertical-align: middle;
    }
    .live-name {
        height: 2rem;
        line-height: 2rem;
        margin-left: .5rem;
        color: #fff;
        font-size: 1.3rem;
        max-width: 10rem;
        overflow: hidden;
        text-overflow: ellipsis;
        display: inline-block;
        white-space: nowrap;
        cursor: pointer;
    }
}
.top_menu {
    display: none;
    position: absolute;
    background: rgba(0,0,0,.5);
    border-radius: 5px;
    -webkit-transition: 2s;
    transition: 2s;
    -webkit-transform: translateY(1rem);
    transform: translateY(1rem);

    &:before {
        content: "";
        position: absolute;
        left: 1rem;
        top: -.7rem;
        width: 0;
        height: 0;
        border-width: 0 .7rem .7rem .7rem;
        border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0,0,0,.5) rgba(0, 0, 0, 0);
        border-style: solid;
    }
    li {
        display: block;
        width: 100%;
        height: 4rem;
        line-height: 4rem;
        text-align: center;
        border-bottom: solid 1px #fff;
        font-size: 1.4rem;
        color: #fff;
        white-space: nowrap;

        a {
            display: block;
            color: #fff;
            padding: 0 1rem;
        }
        &:last-child {
            border: none;
        }
    }
}
// 左上角直播间条

// 主屏消息层，即听课指南，语音消息等  -- begin --
.speakContentBox {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    padding: 0 0 0;
    overflow: auto;
    overflow-x: hidden;
    background: #f2f2f2;
    -webkit-overflow-scrolling: touch;
}
.scrollContentBox {
    position: relative;
    min-height: 105%;
    z-index: 2;
}
    // 主屏消息层中的头部介绍部分 -- begin--
    .qlTopicHeadBox {
        display: none;
    }
    .qlTimerShow {
        display: block;
    }
          // 邀请嘉宾的box -- begin --
          .ql_start_box {
              background: #fff;
              border: solid 1px #ededed;
              margin: 4.5rem 1rem 1rem;

              .name {
                  padding: 2rem 1.5rem 1rem;
                  font-size: 1.6rem;
                  color: #383838;
                  line-height: 2.6rem;
                  font-weight: 700;
                  word-break: break-all;
                  overflow: hidden;
              }
              .ql_start_date {
                  position: relative;
                  display: block;
                  padding: 1.5rem 0;
                  margin: 0 1.5rem;
                  line-height: 1.2rem;
                  color: #737373;
                  font-size: 1.3rem;

                  &::before {
                      content: "";
                      position: absolute;
                      top: 0;
                      left: 0;
                      width: 3.5rem;
                      height: .2rem;
                      background: #f73657;
                  }
              }
          }
          .ql-s-bottom {
              display: -webkit-box;
              display: -webkit-flex;
              display: -ms-flexbox;
              display: flex;

              a {
                  position: relative;
                  display: inline-block;
                  -webkit-box-flex: 1;
                  -webkit-flex: 1;
                  -ms-flex: 1;
                  flex: 1;
                  height: 5rem;
                  font-size: 1.5rem;
                  color: #333;
                  line-height: 5rem;
                  text-align: center;
                  border-top: solid 1px #f2f2f2;
              }
          }
          // 邀请嘉宾的box -- end --


          // 听课指南的box -- begin --
          .topic_tips_dl {
              position: relative;
              display: block;
              background: #fff;
              margin: 1rem;
              padding: 1.5rem;
              border: solid 1px #ededed;

              .btn_close_topic_tips {
                  position: absolute;
                  width: 3rem;
                  height: 3rem;
                  font-size: 1.4rem;
                  text-align: center;
                  line-height: 3rem;
                  top: .5rem;
                  right: .5rem;
                  color: #ccc;
                  cursor: pointer;
              }
              .title {
                  display: block;
                  height: 3rem;
                  line-height: 3rem;
                  font-size: 14px;
                  color: #333;
              }
              li {
                  list-style-type: decimal;
                  line-height: 2rem;
                  font-size: 14px;
                  padding: .7rem .5rem 0 .2rem;
                  margin-left: 2rem;
                  color: #808080;
              }
          }
          // 听课指南的box -- end --

    // 主屏消息层中的头部介绍部分 -- end--


    // 所属直播间的box -- begin --
    .bubbles_dl {
        display: block;
        padding: 1rem 0;
    }
    .head_portrait img {
        width: 100%;
        height: 100%;
        border-radius: 3rem;
    }
    [class*="_bubble"] {
      position: relative;
      display: block;
      padding: 1rem 1rem 2.5rem 6rem;

      &:after {
          visibility: hidden;
          display: block;
          font-size: 0;
          content: " ";
          clear: both;
          height: 0;
      }
      .speak_time {
          display: block;
          padding: 0 4.5rem 0 0;
          line-height: 2rem;
          text-align: center;
          color: #b3b3b3;
          font-size: 1.2rem;
      }
      .head_portrait {
          position: absolute;
          left: 1rem;
          top: 1.5rem;
          width: 4rem;
          height: 4rem;
          border-radius: 4rem;
          overflow: hidden;
          cursor: pointer;
      }
      .speaker_name {
          font-size: 1.2rem;
          line-height: 2.5rem;
          color: #999;

          b {
              color: #4c4c4c;
              padding: 0 .5rem 0 0;
              font-size: 1.2rem;
              font-weight: 400;
              max-width: 20rem;
              overflow: hidden;
              display: inline-block;
              vertical-align: top;
              text-overflow: ellipsis;
              white-space: nowrap;
          }
      }
      .btn_revoke {
          position: relative;
          float: right;
          width: 3rem;
          height: 3rem;
          line-height: 3rem;
          text-align: center;
          color: #b3b3b3;
          cursor: pointer;

          &:before {
            position: absolute;
            content: "";
            width: 4rem;
            height: 4rem;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
        }
      }
      .bubble_content {
          position: relative;
          float: left;
          max-width: 80%;
          min-width: 5rem;
          min-height: 3.6rem;
          padding: 0;
          margin: 0;
          border-radius: 3px;
          line-height: 2.4rem;
          cursor: pointer;

          img {
              max-width: 100%;
              max-height: 12rem;
              display: block;
              border-radius: 3px;
          }
          &:before {
              content: "";
              position: absolute;
              top: 1.2rem;
              width: 0;
              height: 0;
              border-top: .5rem solid rgba(0, 0, 0, 0);
              border-bottom: .5rem solid rgba(0, 0, 0, 0);
          }
      }
    }

    .topic-top-tip, .topic-top-tip * {
        font-size: 1.6rem;
        color: #333;
    }
    .topic-top-tip {
        width: 80%;
        p {
            line-height: 2.2rem;
            color: #333;
        }
        a {
            line-height: 1.4rem;
            margin-top: .5rem;
            margin-bottom: .3rem;
            font-size: 1.4rem;
        }
    }
    .bubble_content{
      .bubble_content_main {
          display: block;
          position: relative;
          min-height: 100%;
          padding: .8rem 1.2rem;
          margin: 0;
          background: #fff;
          border-radius: 3px;
      }
      p {
          padding: 0 0;
          font-size: 1.6rem;
          word-break: break-all;
          color: #5d664f;

          &:last-child {
              color: #5d664f;
          }
      }

    }
    .main-color-text {
        color: #f84c69;
    }
    .bubble_qrcode_link {
        display: block;
        padding-top: .5rem;
        color: #999;
        font-size: 1.6rem;
    }
    // 所属直播间的box -- end --

    // 主持人，嘉宾的消息记录 -- begin --
    .bubbles_dl {
        display: block;
        padding: 1rem 0;
    }
    .hasTime .head_portrait {
        top: 3.5rem;
    }
    .bubble_content.green_bubble{
      .bubble_content_main {
          background-color: #b0e75a;
      }
      i {
          color: #fff;
          border-color: #fff;
      }
      .audio-bar-area::before {
          background-color: #9cd543;
      }
    }
    .play-box {
        color: #b3b3b3;
        display: block;
        width: 100%;
        left: 0;
        right: auto;
        min-width: 6rem;
    }
    .zan {
        position: absolute;
        left: 0;
        color: #ccc;
        cursor: pointer;
        padding-top: .4rem;

        .active {
            color: #edcb91;
        }
        b {
            font-size: 1.6rem;
            padding: .3rem .5rem .3rem 0;

            &::after {
              position: absolute;
              content: "";
              width: 4rem;
              height: 4rem;
              left: 50%;
              top: 50%;
              -webkit-transform: translate(-50%,-50%);
              transform: translate(-50%,-50%);
          }
        }
    }
    .bubble_content.recordTemp, .bubble_content.recordingMsg {
        position: relative;
        width: 16rem;
        height: 4rem;
        cursor: pointer;
    }
    .recordTemp, .recordingMsg {
        .recordwid1{
          width: 12rem;
        }
        i {
          display: inline-block;
          width: 2.5rem;
          height: 2.5rem;
          border-radius: 10rem;
          font-size: 1rem;
          line-height: 2.4rem;
          color: #4c4c4c;
          text-align: center;
          margin-left: .6rem;
          margin-top: .3rem;
          border: solid 1px #4c4c4c;
          -webkit-user-select: none;
          -moz-user-select: none;
          -ms-user-select: none;
          -webkit-flex-shrink: 0;
          -ms-flex-negative: 0;
          flex-shrink: 0;
      }
      var {
          display: inline-block;
          height: 3rem;
          color: #5d664f;
          line-height: 3rem;
          padding: 0 .5rem 0 1rem;
          font-size: 1.4rem;
      }
    }
    .recordingMsg var:before {
        content: "";
        position: absolute;
        top: -.3rem;
        width: .8rem;
        height: .8rem;
        border-radius: 1rem;
        background: #f94747;
        right: -.3rem;
    }
    .bubble_content.recordTemp .bubble_content_main, .bubble_content.recordingMsg .bubble_content_main {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        padding: .5rem;
    }
    .bubble_content.green_bubble .audio-bar-area{
      .front-bar {
          background-color: #fff;
      }
      .block {
          background-color: #fff;
          border-color: rgba(255,255,255,.2);
      }
    }
    .audio-bar-area {
        position: relative;
        opacity: 0;
        display: block;
        margin-left: 1rem;
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        -ms-flex: 1;
        flex: 1;
        vertical-align: top;
        margin-top: 1px;

        &::before {
            position: absolute;
            width: 100%;
            left: 0;
            right: 3.7rem;
            height: .2rem;
            background-color: #ccc;
            border-radius: 1px;
            top: 50%;
            -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
            content: '';
        }
        .front-bar {
            position: absolute;
            display: block;
            left: 0;
            height: .2rem;
            background-color: #4d4d4d;
            border-radius: 1px;
            top: 50%;
            -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
        }
        .block {
            position: relative;
            display: block;
            height: .7rem;
            width: .7rem;
            position: absolute;
            left: 0;
            top: 50%;
            -webkit-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
            background-color: #4d4d4d;
            border: .3rem solid rgba(0,0,0,.2);
            border-radius: 2rem;
            box-sizing: content-box;
            background-clip: content-box;

            &::before {
                content: '';
                width: 3rem;
                height: 3rem;
                position: absolute;
                left: 50%;
                top: 50%;
                -webkit-transform: translate(-50%,-50%);
                transform: translate(-50%,-50%);
            }
            b {
                display: none;
                width: 1px;
                height: 3.8rem;
                background-color: #fdb200;
                position: absolute;
                top: -1.5rem;
                left: .2rem;
            }
        }
    }
    .isReaded .audio-bar-area {
        opacity: 1;
    }
    .bubble_content.img_bubble .bubble_content_main {
        padding: 0;
    }
    // 主持人，嘉宾的消息记录 -- end --

// 主屏消息层，即听课指南，语音消息等  -- end --

// 副屏，讨论层  -- begin --
.commentBox {
    z-index: 4;
    display: none;

    &:before {
        content: "";
        position: absolute;
        z-index: 3;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: #000;
        opacity: .5;
    }
}
.commentBox, .speakBox {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.commentHeader {
    position: absolute;
    z-index: 4;
    top: 0;
    left: 0;
    padding: 1.2rem 0 0;
    width: 100%;
    text-align: center;
}
.backToLive {
    display: inline-block;
    width: 9.5rem;
    height: 3.5rem;
    line-height: 3.5rem;
    background: #00acff;
    color: #fff;
    font-size: 1.5rem;
    border-radius: 2px;
}
.commentContentBox {
    position: absolute;
    z-index: 4;
    width: 100%;
    top: 6rem;
    bottom: 0;
    padding: 0 0 0;
    overflow: auto;
    overflow-x: hidden;
    background: #fff;
    -webkit-overflow-scrolling: touch;
}
.btn_load_history {
    display: block;
    height: 2rem;
    color: #5d5b5b;
    text-align: center;
    font-size: 1.4rem;

    i {
        display: none;
        position: fixed;
        z-index: 3;
        left: 50%;
        width: 2rem;
        height: 2rem;
        margin: .5rem 0 0 -1rem;
        background: url(#{$imgPath}/logo_loading_1.gif) no-repeat;
        background-size: 100%;
    }
}
.scrollContentBox {
    position: relative;
    min-height: 105%;
    z-index: 2;

    .comment_count {
        height: 3rem;
        color: #999;
        padding-left: 1rem;
        font-size: 1.2rem;
        border-bottom: solid 1px #ebebeb;
        padding-top: .9rem;

        .icon_consult {
            margin-right: .5rem;
        }
    }
}
.none_pic5 {
    background: url(#{$imgPath}/ico_norecord5.png) center center no-repeat;
    background-size: 8rem;
    /* margin-top: 3rem; */
}
.none_record {
    width: 100%;
    height: 17rem;
    position: relative;
}
.none_tip {
    position: absolute;
    bottom: 0;
    text-align: center;
    display: block;
    width: 100%;
    font-size: 1.5rem;
    color: #999;
    padding-right: 3%;
}
#BubblesTemp, #commentDlTemp {
    position: absolute;
    z-index: -9999;
    left: 0;
    top: 0;
    width: 100%;
    opacity: 0;
}
.comment_dl {
    display: block;
    padding: 0;

    .comment_dd {
        display: block;
        padding: 1rem;
        background: #fff;
        border-bottom: solid 1px #ebebeb;
        cursor: pointer;

        .right_info {
            float: right;
            height: 2rem;
            overflow: hidden;

            .btn_iswalled, .btn_wall {
              display: inline-block;
              height: 2rem;
              line-height: 2rem;
              border-radius: 2px;
              padding: 0 .8rem;
              color: #00acff;
              background: #fff;
              border: solid 1px #dadada;
              font-size: 1.2rem;
              cursor: pointer;
          }
        }
        .avatar {
            float: left;
            width: 4rem;
            height: 4rem;
            margin: 0 1rem 0 0;
            border-radius: 4rem;
            overflow: hidden;
        }
        .avatar img {
            width: 100%;
            height: 100%;
        }
        .author_name {
            display: block;
            height: 2rem;
            line-height: 2rem;
            color: #00acff;
            font-size: 1.2rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .time {
            display: inline-block;
            height: 2rem;
            line-height: 2rem;
            font-weight: 400;
            color: #9a9a9a;
            font-size: 1.2rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .commentManage {
            display: inline-block;
            width: 4rem;
            height: 2rem;
            line-height: 2rem;
            margin: 0 0 0 .5rem;
            text-align: center;
            color: #00acff;
            vertical-align: top;
            cursor: pointer;
            position: relative;
        }
        .commentManageTab {
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            height: 2.5rem;
            width: 8rem;
            position: absolute;
            left: 0;
            top: -2.9rem;
            background-color: rgba(0,0,0,.6);
            border-radius: .2rem;
            margin-left: -50%;

            a {
                color: #fff;
                line-height: 2.5rem;
                display: inline-block;
                -webkit-box-flex: 1;
                -ms-flex: 1;
                -webkit-flex: 1;
                flex: 1;
                position: relative;
            }
        }
        .content {
            display: block;
            line-height: 2rem;
            color: #5b5b5b;
            margin: 1rem 0 0 5rem;
            word-break: break-all;
        }
        &:after {
            visibility: hidden;
            display: block;
            font-size: 0;
            content: " ";
            clear: both;
            height: 0;
        }
    }
}
.box_nothing {
    display: none;
    text-align: center;
    padding: 0 0 1rem;

    .tips_1 {
        display: block;
        font-size: 1.3rem;
        line-height: 3rem;
        padding: .5rem 0 0;
        color: #899aa3;
    }
}

// 副屏，讨论层  -- end --










// speakBottom -- begin --
.hasTabBottom .speakBottom {
    display: block;
}
.tab_speak {
    display: none;
}
.speakBottom {
    display: none;
    position: relative;
    z-index: 4;
    width: 100%;
    bottom: -1px;
    box-shadow: 0 0 4px #ccc;

    @at-root .tab_bar_ul {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        display: -webkit-flex;
        width: 100%;
        height: 5rem;
        line-height: 5rem;
        background: #fff;
        border-bottom: solid 1px #e8e8e8;

        li {
          display: inline-block;
          position: relative;
          -webkit-box-flex: 1;
          -ms-flex: 1;
          -webkit-flex: 1;
          flex: 1;
          display: block;
          width: 100%;
          text-align: center;
          font-size: 1.4rem;
          line-height: 5rem;
          color: #999;
          cursor: pointer;
          padding: 0 .5rem;
          white-space: nowrap;

          &:before {
              display: inline-block;
              margin: .1rem .5rem 0 0;
              font-size: 2rem;
          }
          &:after {
              content: "";
              position: absolute;
              right: -1px;
              width: 1px;
              height: 2rem;
              top: 1.5rem;
              background: #e8e8e8;
          }
      }
      .first_record {
          position: absolute;
          bottom: 6.5rem;
          left: 50%;
          width: 14rem;
          height: 4rem;
          cursor: pointer;
          padding: 1rem 0;
          text-align: center;
          line-height: 2rem;
          color: #fff;
          background: #2984e2;
          border-radius: 6px;
          font-weight: 400;
          font-size: 1.4rem;
          margin-left: -3rem;

          i {
              position: absolute;
              width: 2.2rem;
              height: 2.2rem;
              border-radius: 4rem;
              border: solid .6rem rgba(48,133,221,.5);
              box-shadow: 0 0 1px 0.9rem rgba(48,133,221,.3);
              left: 3rem;
              bottom: -5rem;
          }
      }
    }
}
.flex-other {
    -webkit-flex-shrink: 0;
    -ms-flex: 0 0 auto;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}
.mediaBottom .tab_media, .textBottom .tab_text, .voiceBottom .tab_voice {
    color: #0fc853;
}

  // recordBox  -- begin --
  .voiceBottom .backContentBox, .voiceBottom .recording_tab_box {
      display: block;
  }
  .recording_tab_box {
      display: none;
      position: relative;
      width: 100%;
      height: 21rem;
      padding: 4rem 0 0;
      background: #fff;
      overflow: hidden;
      white-space: nowrap;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;


      @at-root .btn_dd {
          position: relative;
          display: block;
          width: 100%;
          padding: 2rem 0;
          text-align: center;

          i {
              content: "";
              position: absolute;
              left: 50%;
              top: 50%;
              width: 9rem;
              height: 9rem;
              margin: -4.5rem 0 0 -4.5rem;
              border-radius: 9rem;
              background-color: #e5f4fc;
          }
          .btn_add_mic, .btn_cancel_clickRec {
              display: none;
              position: absolute;
              z-index: 4;
              top: -2.5rem;
              right: 1.5rem;
              width: 6rem;
              height: 2.2rem;
              line-height: 2.2rem;
              cursor: pointer;
              text-align: center;
              color: #999;
              border: solid 1px #999;
              border-radius: 3rem;
              font-size: 1.2rem;
          }
          .btn_add_mic {
              display: block;
              background: #00acff;
              color: #fff;
              border: none;
          }
          .btn_check_clickRec {
              margin: -1.1rem 0 0 -13rem;
              border-color: #2894e2;
          }
          .btn_again_clickRec {
              margin: -1.1rem 0 0 7rem;
              color: #f97070;
              border-color: #f97070;
          }
          .btn_again_clickRec, .btn_check_clickRec {
            display: none;
            position: absolute;
            left: 50%;
            top: 50%;
            z-index: 4;
            width: 6rem;
            height: 2.2rem;
            line-height: 2rem;
            cursor: pointer;
            text-align: center;
            color: #2894e2;
            border: solid 1px #e5e5e5;
            border-radius: 3rem;
            font-size: 1.2rem;
        }
        .btn_recording:before, .whisper_answer_wkBox .audio_box:before, dt.luckyMoney .lm_main:before {
            background: url(#{$imgPath}/live_logo.png?v=aoemotagbetter) no-repeat;
            background-size: 75rem;
        }
        .btn_recording {
            position: relative;
            display: inline-block;
            width: 9rem;
            height: 9rem;
            border-radius: 9rem;
            line-height: 9rem;
            font-size: 1.4rem;
            color: #fff;
            text-align: center;
            background-color: #00acff;
            background-position: 0 -14rem;
            cursor: pointer;

            &:before {
                content: "";
                display: inline-block;
                width: 6rem;
                height: 6rem;
                margin: 1.5rem 0 0;
                background-position: 0 -14rem;
            }
        }
      }
      .second_dd {
          display: none;
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 3rem;
          margin: 1rem 0 0;
          line-height: 3rem;
          text-align: center;
          color: #00acff;
          font-size: 1.4rem;

          i {
              display: inline-block;
              width: 5rem;
              height: 1rem;
              margin: 1rem 1rem 0;
              vertical-align: top;
              background-size: auto 100%;

              &:first-child {
                  background: url(#{$imgPath}/ico_voice_1.png) right center no-repeat;
              }
              &:last-child {
                  background: url(../img/live/ico_voice_2.png) left center no-repeat;
              }
          }
      }
      @at-root .recording .second_dd {
          display: block;
      }
      .rec_Title_box {
          position: absolute;
          left: 0;
          top: 2rem;
          display: block;
          width: 100%;
          height: 3rem;
          line-height: 3rem;
          text-align: center;
          font-size: 1.4rem;
          color: #888;

          b {
              font-weight: 400;

              &:last-child {
                  display: none;
              }
          }
      }
  }
  .recording_box, .recording_click {
      display: inline-block;
      width: 100%;
      height: 100%;
      transition: .5s;
      -webkit-transition: .5s;
      margin-left: 0;
      vertical-align: top;
  }

  .rec_Title_box b:first-child {
      display: block;
  }
  .changeRecType {
    a.recType_1 {
        color: #888;
    }
    a.recType_2 {
        color: #00acff;
    }
    .recording_click {
        margin-left: -100%;
    }
    .rec_Title_box b:first-child {
        display: none;
    }
    .rec_Title_box b:last-child {
        display: block;
    }
    .tab_recordingType {
        padding-left: 5.2rem;
    }
  }
  .btn_recording.start_rec {
      border: solid 1px #d4d4d4;
      background: #fff;

      &:before {
          width: 6.8rem;
          height: 6.8rem;
          margin: 1rem 0 0;
          border-radius: 7rem;
          background: #f15959;
      }
  }
  .btn_recording.stop_rec {
      display: none;
  }
  .btn_recording.send_rec {
      display: none;
  }
  .rec_Title_box.onMic, .rec_Title_box.replyMic {
      display: none;
  }
  .rec_Title_box.replyMic var {
      color: #4d4d4d;
      max-width: 10rem;
      display: inline-block;
      vertical-align: top;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
  }

  .tab_recordingType {
      position: absolute;
      left: 50%;
      bottom: 0;
      width: 25.5rem;
      height: 5rem;
      margin-left: -12.9rem;
      padding: .5rem 0 0 10.3rem;
      transition: .5s;
      -webkit-transition: .5s;

      &:before {
          content: "";
          position: absolute;
          left: 50%;
          top: .5rem;
          width: .6rem;
          height: .6rem;
          margin: 0 0 0 -.3rem;
          background: #00acff;
          border-radius: 1rem;
      }
      a {
          position: relative;
          display: inline-block;
          min-width: 5rem;
          height: 3rem;
          padding: 0 1rem;
          line-height: 3rem;
          text-align: center;
          color: #888;
          font-size: 1.4rem;
      }
  }
  a.recType_1 {
      color: #00acff;
  }
  .recType_2:after, .recType_3:after {
      content: "";
      position: absolute;
      left: 0;
      top: 1rem;
      width: 1px;
      height: 1rem;
      background: #e5e5e5;
  }
  .recording .tab_recordingType, .recording span.rec_Title_box {
      display: none!important;
  }
      // recording 和 tab recording 的动画 -- begin --
      .btn_dd.startRec i,.recording .recording_box .btn_dd i {
          animation: recordingAnime 1s linear infinite alternate;
          -webkit-animation: recordingAnime 1s linear infinite alternate;
          -moz-animation: recordingAnime 1s linear infinite alternate
      }
      @keyframes recordingAnime {
          from {
              width: 9rem;
              height: 9rem;
              margin: -4.5rem 0 0 -4.5rem
          }
          to {
              width: 15rem;
              height: 15rem;
              margin: -7.5rem 0 0 -7.5rem
          }
      }
      @-webkit-keyframes recordingAnime {
          from {
              width: 9rem;
              height: 9rem;
              margin: -4.5rem 0 0 -4.5rem
          }
          to {
              width: 15rem;
              height: 15rem;
              margin: -7.5rem 0 0 -7.5rem
          }
      }
      .btn_dd.startRec .btn_recording.start_rec, .btn_dd.stopRec .btn_recording.start_rec {
          display: none;
      }
      .btn_dd.startRec .btn_recording.stop_rec, .btn_dd.stopRec .btn_recording.send_rec {
          display: inline-block;
      }
      // recording 和 tab recording 的动画 -- end --


  // recordBox  -- end --


// speakBottom -- end --
